<template>
  <el-card :body-style="{ padding: '10px 20px 20px 20px' }" class="task-card">
    <!-- 任务头部 -->
    <div class="task-header">
      <h3>{{ task.taskName  || "未查询"}}</h3>
    </div>

    <el-divider style="margin-top: 2px; margin-bottom: 8px;"></el-divider>

    <!-- 任务内容与进度 -->
    <div class="task-body">
      <div class="task-content">
        <p><strong>负责人:</strong> {{ task.assignedName || '未分配' }}</p>
        <p>
          <strong>任务状态:</strong>
          <el-tag :type="getStatusType(task.taskStatus)">
            {{ getTaskStatus(task.taskStatus) || "null"}}
          </el-tag>
        </p>
        <p><strong>更新时间:</strong> {{ formatDate(task.updateTime) || formatDate(task.createTime) || "null"}}</p>
        <p><strong>截止日期:</strong> {{ formatDate(task.dueDate) }}</p>
        <p><strong>项目名称:</strong> {{ task.projectName || '无描述' }}</p>
        <p><strong>所属租户:</strong> {{ task.tenantName || '无描述' }}</p>
      </div>
      <!-- 任务进度环 -->
      <div class="task-progress">
        <el-progress type="circle" :percentage="task.progress ?? 0" :color="getProgressColor(task.progress ?? 0)">
        </el-progress>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ElCard, ElDivider, ElTag, ElProgress } from 'element-plus';
import type { TaskDTO } from '../../type/Task'; // 确保路径正确

const props = defineProps<{
  task: TaskDTO;
}>();

// 获取任务状态
const getTaskStatus = (status?: string) => {
  if (!status) return '未知状态';
  switch (status) {
    case '0':
      return '未开始';
    case '1':
      return '进行中';
    case '2':
      return '已完成';
    default:
      return '未知状态';
  }
};

const getStatusType = (status?: string) => {
  if (!status) return 'info';
  switch (status) {
    case '0':
      return 'info';
    case '1':
      return 'warning';
    case '2':
      return 'success';
    default:
      return 'info';
  }
};

// 格式化日期
const formatDate = (date?: string | Date) => {
  if (!date) return '未知日期';
  const d = new Date(date);
  if (isNaN(d.getTime())) return '无效日期';
  return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
};

// 获取进度颜色
const getProgressColor = (percentage: number) => {
  if (percentage < 30) return '#f56c6c';
  if (percentage < 70) return '#e6a23c';
  return '#5cb87a';
};
</script>

<style lang="scss" scoped>
.task-card {
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 500px;
}

.task-header {
  text-align: left;
}

.task-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 10px;

  @media (max-width: 500px) {
    flex-direction: column;
    align-items: center;
  }
}

.task-content {
  flex: 1;
  text-align: left;

  p {
    margin: 5px 0;

    strong {
      margin-right: 5px;
    }
  }
}

.task-progress {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  align-items: center;

  @media (max-width: 768px) {
    margin-left: 0;
    margin-top: 15px;
  }
}
</style>
